<template>
    <div>
      <div v-for="(menuItem, index) in menuItems" :key="index">
        <input v-model="menuItem.name" type="text" placeholder="菜单名称" />
        <button @click="removeMenuItem(index)">删除</button>
      </div>
      <div>
        <input v-model="newMenuItem.name" type="text" placeholder="菜单名称" />
        <button @click="addMenuItem">添加</button>
      </div>
    </div>
  </template>
   
  <script>
  export default {
    data() {
      return {
        menuItems: [
          // 初始菜单项列表
          { name: '菜单项1' },
          { name: '菜单项2' }
        ],
        newMenuItem: { name: '' }
      };
    },
    methods: {
      addMenuItem() {
        if (this.newMenuItem.name) {
          this.menuItems.push({ ...this.newMenuItem });
          this.newMenuItem.name = '';
        }
      },
      removeMenuItem(index) {
        this.menuItems.splice(index, 1);
      }
    }
  };
  </script>